<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="../js/echarts.min.js"></script>
	</head>

	<body background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//准备数据
			//图6
			var option = {
				//柱状图
				legend: {
					orient: 'horizontal', // 垂直显示vertical
					x: 'center', // 显示位置--左上left,center,right
					top: '5%',
					textStyle: {
						color: 'white',
						fontSize: '10'
					},
					data: ['第一季度', '第二季度', '第三季度', '第四季度'],
					itemWidth: 15,
					itemHeight: 8, //标记图形的长宽
				},
				tooltip: {},
				dataset: {
					// 提供一份数据。
					source: [
						['product', '第一季度', '第二季度', '第三季度', '第四季度'],
						['按摩椅', 54400, 24800, 110400, 83200],
						['跑步机', 864600, 264000, 132000, 2156001],
						['微波炉', 32500, 47000, 105000, 14500],
						['显示器', 79500, 367500, 409500, 444000],
						['液晶电视', 1205000, 125000, 550000, 315000],
					]
				},
				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				xAxis: {
					type: 'category',
					axisTick: {
						alignWithLabel: true, //刻度线与标签对齐
					},
					axisLabel: {
						textStyle: {
							color: 'white',
							fontSize: '10'
						},
					} //坐标轴的刻度标签属性设置
				},
				// 声明一个 Y 轴，数值轴。
				yAxis: {
					name: '金额（元）', //给坐标轴起个名字
					nameTextStyle: {
						color: "#65ABE7",
						fontSize: 12,
					},
					axisLabel: {
						textStyle: {
							color: 'white',
							fontSize: '10'
						},
					},
				},
				// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
				grid: { //设置绘图区域在当前视图的位置，参数由左上角x,y,右下角x2,y2,长宽，width,height
					x: '20%',
					y: '20%',
					//x2:5,
					//y2:20,
					borderWidth: 1
				},
				series: [{
						type: 'bar'
					},
					{
						type: 'bar'
					},
					{
						type: 'bar'
					},
					{
						type: 'bar'
					}
				]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>

</html>